<template>
  <div>
    <!-- 地图 -->
    <div class="translate">
      <!-- 文字 -->

      <!-- 地图 -->
      <div class="Map_box">
        <div class="map">
          <div ref="china" style="height: 580px; width: 1200px">地图2</div>
        </div>
        <!-- tabs切换 -->
        <div class="zhan"></div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
import * as echarts from "echarts";
import {money1} from "../../utils/index"
import chinaJSON from "../../assets/json/china.json";
import DomJson from "../../assets/json/dom.json";

import { businessMap } from "../../Api/market/index";
const china = ref();
const china1 = ref();

//数据纯属虚构
const data = [
  {
    value: "110000",
    label: "北京",
  },
  {
    value: "120000",
    label: "天津",
  },
  {
    value: "310000",
    label: "上海",
  },
  {
    value: "500000",
    label: "重庆",
  },
  {
    value: "130000",
    label: "河北",
  },
  {
    value: "410000",
    label: "河南",
  },
  {
    value: "370000",
    label: "山东",
  },
  {
    value: "140000",
    label: "山西",
  },
  {
    value: "610000",
    label: "陕西",
  },
  {
    value: "150000",
    label: "内蒙古",
  },
  {
    value: "210000",
    label: "辽宁",
  },
  {
    value: "220000",
    label: "吉林",
  },
  {
    value: "230000",
    label: "黑龙江",
  },
  {
    value: "320000",
    label: "江苏",
  },
  {
    value: "330000",
    label: "浙江",
  },
  {
    value: "340000",
    label: "安徽",
  },
  {
    value: "420000",
    label: "湖北",
  },
  {
    value: "430000",
    label: "湖南",
  },
  {
    value: "360000",
    label: "江西",
  },
  {
    value: "350000",
    label: "福建",
  },
  {
    value: "440000",
    label: "广东",
  },
  {
    value: "460000",
    label: "海南",
  },
  {
    value: "450000",
    label: "广西",
  },
  {
    value: "520000",
    label: "贵州",
  },
  {
    value: "530000",
    label: "云南",
  },
  {
    value: "510000",
    label: "四川",
  },
  {
    value: "620000",
    label: "甘肃",
  },
  {
    value: "640000",
    label: "宁夏",
  },
  {
    value: "650000",
    label: "新疆",
  },
  {
    value: "630000",
    label: "青海",
  },
  {
    value: "540000",
    label: "西藏",
  },
  {
    value: "810000",
    label: "香港",
  },
  {
    value: "820000",
    label: "澳门",
  },
  {
    value: "710000",
    label: "台湾",
  },
];

// var data1 = [
//   // {
//   //   name: "江苏省",
//   //   value: "5.3",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "北京省",
//   //   value: "3.8",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "上海市",
//   //   value: "4.6",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "重庆市",
//   //   value: "3.6",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "河北省",
//   //   value: "3.4",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "河南省",
//   //   value: "3.2",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "云南省",
//   //   value: "1.6",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "辽宁省",
//   //   value: "4.3",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "黑龙江省",
//   //   value: "4.1",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "湖南省",
//   //   value: "2.4",
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "安徽省",
//   //   value: 3.3,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "山东省",
//   //   value: 3.0,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "新疆维吾尔自治区",
//   //   value: 1,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "江苏省",
//   //   value: 3.9,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "浙江省",
//   //   value: 3.5,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "江西省",
//   //   value: 2.0,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "湖北省",
//   //   value: 2.1,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "广西壮族自治区",
//   //   value: 3.0,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "甘肃省",
//   //   value: 1.2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "山西省",
//   //   value: 3.2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "内蒙古自治区",
//   //   value: 3.5,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "陕西省",
//   //   value: 2.5,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "吉林省",
//   //   value: 4.5,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "福建省",
//   //   value: 2.8,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "贵州省",
//   //   value: 1.8,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "广东省",
//   //   value: 3.7,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "青海省",
//   //   value: 0.6,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "西藏自治区",
//   //   value: 0.4,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "四川省",
//   //   value: 3.3,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "宁夏回族自治区",
//   //   value: 0.8,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "海南省",
//   //   value: 1.9,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "台湾省",
//   //   value: 0.1,
//   //   seriesName: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "香港省",
//   //   value: 0.1,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "澳门省",
//   //   value: 0.1,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "天津市",
//   //   value: 0.1,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
//   // {
//   //   name: "北京市",
//   //   value: 0.1,
//   //   lable: 2,
//   //   value1: "5.3333",
//   // },
// ];
let data1 = [
  // { value: 110000, name: "北京市" },
  // { value: 120000, name: "天津市" },
];
// const data1 = reactive([])
var aaaa = ref(2);
var yData = [] as any;
var barData = [] as any;
const from = reactive({
  product_name: "阀门", //阀门
  value: "", //全部地区
  onTime: [], //开始时间
  cgs: "", //采购商类型
  pinpai: "", //品牌
  ssfw: "", //搜索范围
  ppms: "", //匹配模式
  pcc: "", //排除词
  bhc: "", //包含词
});
// 地图接口
function Map() {
  businessMap({ product_name: from.product_name }).then((res) => {
    // console.log(res.data.data, "111");
    data1 = res.data.data;
    for (var i = 0; i < 10; i++) {
      barData.push(data1[i]);
      // console.log(data1[i].value);
      yData.push(i + data1[i].name.slice(0,2));
      // yData.push(i + data1[i].value);
    }
    // let a = {
    //   data1: data1,
    //   yData: yData,
    // };
    MapBar(data1, yData);
    // const resLog = [...res.data.data];
    // data1 = resLog;
  });
  // console.log(data);
}
function MapBar(data1, yData) {
  var myChart = echarts.init(china.value);
  echarts.registerMap("china", chinaJSON as any); //注册可用的地图
  var option = {
    title: [
      {
        show: true,
        text: "",
        textStyle: {
          color: "#2D3E53",
          fontSize: 18,
        },
        right: 150,
        top: 10,
      },
    ],
    tooltip: {
      show: true,
      formatter: (params: any) => {
        return params.name + "：" + params.data["value"];
      },
    },
    visualMap: {
      type: "continuous",
      orient: "horizontal",
      itemWidth: 10,
      itemHeight: 80,
      text: ["高", "低"],
      showLabel: true,
      seriesIndex: [0],
      min: 0,
      max: 2,
      inRange: {
        color: ["#6FCF6A", "#FFFD64", "#FF5000"],
      },
      textStyle: {
        color: "#7B93A7",
      },
      bottom: 30,
      left: "left",
    },
    grid: {
      right: 100,
      top: 10,
      bottom: 150,
      width: "20%",
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      type: "category",
      inverse: true,
      nameGap: 16,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 85,
        textStyle: {
          color: "#000",
          align: "left",
          fontSize: 14,
        },
        rich: {
          a: {
            color: "#fff",
            backgroundColor: "#FAAA39",
            width: 20,
            height: 20,
            align: "center",
            borderRadius: 2,
          },
          b: {
            color: "#fff",
            backgroundColor: "#4197FD",
            width: 20,
            height: 20,
            align: "center",
            borderRadius: 2,
          },
        },
        formatter: function (params) {
          if (parseInt(params.slice(0, 1)) < 3) {
            return [
              "{a|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          } else {
            return [
              "{b|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          }
        },
      },
      data: yData,
    },

    // 地图
    geo: {
      roam: false,
      map: "china",
      left: "0",
      right: "500",
      zoom: 0.8, //地图显示比例
      top: -40, //地图距离上边框距离
      // layoutSize: '80%',
      label: {
        emphasis: {
          //   show: false,
          areaColor: "#55b89e", //鼠标移入颜色
          shadowOffsetX: 0, //阴影水平方向上偏移量
          shadowOffsetY: 0, //阴影垂直方向上偏移量
          borderWidth: 0, //描边现况宽
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(13, 38, 77, .3)",
          borderWidth: 1,
          areaColor: "#c5e7de",
        },
        emphasis: {
          areaColor: "#55b89e",
        },
      },
    },
    toolbox : {
									show : false,
									orient : 'vertical',
									left : 'right',
									top : 'center',
									feature : {
										dataView : {
											readOnly : false
										},
										restore : {},
										saveAsImage : {}
									}
								},
    series: [
      {
        name: "mapSer",
        type: "map",
        roam: false,
        geoIndex: 0,
        label : {
										normal : {
											show : true
										},
										emphasis : {
											show : true
										}
									},
        // data: dBar.value,
        data: data1,
      },
      {
        name: "barSer",
        type: "bar",
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 8,
        barGap: 0,
          label: {
        show: true,
        position: 'right',
        valueAnimation: true,
        formatter: function (params) {
          // console.log(params.value);
          
          return  money1(params.value)
        },
      },
        itemStyle: {
          areaColor: "#c5e7de",
          normal: {
            color: function (params) {
              // build a color map as your need.
              var colorList = [
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FFD119", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFAC4C", // 100% 处的颜色
                    },
                  ],
                },
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00C0FA", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2F95FA", // 100% 处的颜色
                    },
                  ],
                },
              ];
              if (params.dataIndex < 3) {
                return colorList[0];
              } else {
                return colorList[1];
              }
            },
            barBorderRadius: 15,
          },
        },
        data: barData,
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(() => {
  Map();
  MapBar();
});
</script>

<style lang="scss" scoped></style>
